<template>
  <div id="app">
    <div>
      <el-form>
        <el-form-item label="活动时间">
          <el-col :span="6">
            <el-date-picker v-model="form.date1" type="month" placeholder="选择日期" style="width: 100%;" />
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="6">
            <el-date-picker v-model="form.date2" type="month" placeholder="选择日期" style="width: 100%;" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <download-excel
      class="export-excel-wrapper"
      :data="json_data"
      :fields="json_fields"
      title="登记表"
      name="登记表.xls"
    >
      <el-button type="primary" size="small">导出EXCEL</el-button>
    </download-excel>
    <el-table
      :data="json_data"
      style="width: 100%"
    >
      <el-table-column
        v-for="(key,val) in json_fields"
        :key="val"
        :prop="key"
        :label="val"
        width="180"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        date1: '',
        date2: ''
      },
      json_data: [
        {
          Name: '张三',
          China: '90',
          Math: '93',
          English: '88'
        },
        {
          Name: '李四',
          China: '94',
          Math: '92',
          English: '86'
        }
      ],
      json_fields: {
        '姓名': 'Name',
        '语文': 'China',
        '数学': 'Math',
        '英语': 'English'
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.form)
    }
  }
}
</script>
